{% extends 'home/public/base.html' %}

{% block title %}

<title>我的地址</title>

{% endblock %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="/static/home/css/order.css">
    <link rel="stylesheet" type="text/css" href="/static/home/css/order-app.css">
{% endblock %}


{% block con %}

<div class="mainbody order">
    <div class="container">
        <!-- 面包屑导航 -->
        <div class="crumbs col-xs-12 col-sm-12">
            <ol class="breadcrumb">
                <li class="hidden-xs hidden-sm"><a href="index.html">首页</a></li>
                <li class="hidden-xs hidden-sm"><a href="member.html">我的商城</a></li>
                <li class="active">我的收货地址</li>
            </ol>
        </div><!-- 面包屑导航 E-->
        
        <div class="main clearfix">
            <!-- 左侧导航 -->
            <div class="left-nav f-fl col-md-4 hidden-xs hidden-sm" >
                <div class="nav-main">
                    <a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>订单中心</a>
                    <a href="{% url 'myhome_myorder' %}" class="ml " >我的订单</a>
                    <a href="#" class="ml ">我的回购单</a> 
                    <a href="#" class="ml ">我的意外保</a>
                    <a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>个人中心</a>
                    <a href="#" class="ml active">地址管理</a>
                    <a href="#" class="ml ">我的收藏</a>
                    <a href="#" class="ml ">消息提醒</a>
                    <a href="#" class="ml ">建议反馈</a>
                </div>
            </div>
            <!-- 左侧导航 E-->
            <!-- 收货地址 -->
            <div >
                <h2>我的地址</h2>
                <br>
                

            <div class="col-md-10">
             <!-- Button trigger modal -->
               <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal">
                    新增地址
               </button>
               <br>
               <br>
               <!-- Modal -->
               <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                 <div class="modal-dialog" role="document">
                   <div class="modal-content">
                     <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                       <h4 class="modal-title" id="myModalLabel">新增地址</h4>
                     </div>
                    <form>
                     <div class="modal-body">
                         <div class="form-group">
                           <label >收货人</label>
                           <input type="text" name="addressname" class="form-control">
                         </div>
                         <div class="form-group">
                           <label >收货地址</label>
                           <input type="text" name="address" class="form-control">
                         </div>

                         <div class="form-group">
                           <label >收货电话</label>
                           <input type="text" name="addressphone" class="form-control">
                         </div>
                      
                         <div class="checkbox">
                           <label>
                             <input type="checkbox" name="status" value="1"> 是否默认
                           </label>
                         </div>

                     </div>
                     <div class="modal-footer">
                       <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                       <button type="button" class="btn btn-primary" id="CreateAddress">添加</button>
                     </div>
                    </form>
                   </div>
                 </div>
               </div>

            </div>
            

            {% for v in sitelist %}
              <!-- 默认地址 -->
                <div class="col-md-6" >
                    <address aid="{{ v.id }}" isstatus='true' {% if v.status %}style="border:2px dashed #f39;"{% else %}style="border:2px solid #eee;"{% endif %}>
                      <strong id="addressname">
                      姓名:{{ v.addressname }}
                    </strong>
                    <br>
                    <span id="address" >地址:{{ v.address }}</span>
                    <br>
                      <abbr title="Phone">电话:</abbr>
                     <span id="phone"> {{ v.addressphone }}</span>
                      {% if v.status %}
                      <span style="color: red;">默认地址</span>
                      {% endif %}
                      <a class="" style="margin:0px 0px 0px 200px;">      
                            <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#{{ v.id }}" id="change">
                                修改地址
                           </button>
                            <a  type="button" class="delete  btn btn-primary btn-xs" href="{% url 'myhome_delsite' v.id %}" >
                              删除
                           </a>
                           <br>
                           <br>
                           <!-- Modal -->
                           <motaikuang>
                           <div class="modal fade" id="{{ v.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                             <div class="modal-dialog" role="document">
                               <div class="modal-content">
                                 <div class="modal-header">
                                   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                   <h4 class="modal-title" >修改地址</h4>
                                 </div>
                                <form action="{% url 'myhome_editsite' %}" method="post">
                                  {% csrf_token %}
                                  <input type="hidden" name="id" value="{{ v.id }}">
                                 <div class="modal-body">
                                     <div class="form-group">
                                       <label >收货人</label>
                                       <input type="text" name="addressname" class="form-control" value="{{ v.addressname }}">
                                     </div>
                                     <div class="form-group">
                                       <label >收货地址</label>
                                       <input type="text" name="address" class="form-control" value="{{ v.address }}">
                                     </div>

                                     <div class="form-group">
                                       <label >收货电话</label>
                                       <input type="text" name="addressphone" class="form-control" value="{{ v.addressphone }}">
                                     </div>
                                  
                                     <div class="checkbox">
                                       <label>
                                         <input type="checkbox" {% if v.status %} checked {% endif %} name="status" value="1"> 是否默认
                                       </label>
                                     </div>

                                 </div>
                                 </form>
                                 <div class="modal-footer">
                                   <button  class="btn btn-default savechange" data-dismiss="modal" >修改</button>
                                  
                                 </div>
                                
                               </div>
                             </div>
                           </div>
                         </motaikuang>
                    </address>
                </div>
            
            {% endfor %}

            </div>
        </div>  
        </div>

{% endblock %}

{% block js %}
<script type="text/javascript">
   //回顶部
    backTop();
    //登录图片鼠标经过
    topLogin();
    //全选
    allSelect();

    // 获取默认地址
    $('address').each(function(){
        if($(this).attr('isstatus')){
            $('input[name=addid]').val($(this).attr('aid'))
        }
    })

    // 给所有的地址绑定单击事件
    $('address').click(function(){
        $('address').css('border','2px solid #ccc')
        $(this).css('border','2px dashed #f39')
        // siblings() 获取当前元素的所有同辈元素
        // $(this).parent().siblings().find('address')....
        // 获取当前点击的地址的id
        var aid = $(this).attr('aid')
        $('input[name=addid]').val(aid)
    })


    // 地址的添加
    $('#CreateAddress').click(function(){
        var data = {}
        // 获取表单中的数据
        data.addressname = $(this).parents('form').find('input[name=addressname]').val()
        data.address = $(this).parents('form').find('input[name=address]').val()
        data.addressphone = $(this).parents('form').find('input[name=addressphone]').val()
        data.status = 0
        if( $(this).parents('form').find('input[name=status]').prop('checked')){
            data.status = 1
        }

        // 发送ajax 添加地址
        $.get('{% url "myhome_addressinsert" %}',data,function(data){
            if(data.error == 0){
                location.href=location.href
            }
            alert(data.msg)
        })


 })



 // 地址的修改
    $('#change').click(function(){
      console.log(3)
        var data = {}
        // 获取表单中的数据
        data.editressname = $("#addressname").text()
        console.log($("#addressname").text())
        data.editress = $("#address").text()
        data.editressphone = $("#phone").text()
        data.status = 0
      })


    $('.savechange').click(function(){
      $(this).parents('motaikuang').find('form').submit();
    })








</script>
{% endblock %}